SLDS provides a full spectrum of color palettes, suited for our UI design that work harmoniously with our brand colors.

Neutral Grays

Our grays can be used on most UI elements but should be limited to:

  • background colors
  • text colors
  • border colors
  • svg fill colors
  • Gray 1
  • #fff
  • Gray 2
  • #fafaf9
  • Gray 3
  • #f3f2f2
  • Gray 4
  • #ecebea
  • Gray 5
  • #dddbda
  • Gray 6
  • #c9c7c5
  • Gray 7
  • #b0adab
  • Gray 8
  • #969492
  • Gray 9
  • #706e6b
  • Gray 10
  • #514f4d
  • Gray 11
  • #3e3e3c
  • Gray 12
  • #2b2826

Brand Colors

Our brand colors should be used sparingly on most UI elements. Ideally, they are limited to primary actions or accents within the application.

  • Primary
  • #1589ee
  • Primary - Active
  • #007add
  • Light
  • #f4f6fe
  • Light - Active
  • #e3e5ed
  • Dark
  • #182337
  • Dark - active
  • #253045
  • Accessible
  • #0070d2
  • Accessible - Active
  • #005fb2
  • Contrast
  • #1a1b1e
  • Contrast - Active
  • #0d0e12


Visual Messaging

Certain colors have inherent meaning for a large majority of users, although we recognize that cultural differences are plentiful. For example, we use red to communicate an error.

Visual Differentiation

Salesforce uses many secondary colors in conjunction with iconography to visually differentiate between similar types of content, such as records of different object types. However, it’s important to not always rely on color to provide visual differentiation. If too many use cases employ color in this manner, the colors lose their meaning.

Visual Hierarchy

Color is used sparingly to draw attention to important elements and those that we want the user to take action on. Because most of the application is gray, pops of color catch a user’s eye.


It’s important that our products meet all web accessibility standards, including the minimum contrast ratios that the WCAG 2.0 specifies for text and background color combinations. This adherence helps users who are colorblind or have low vision to better interact with Salesforce, but it also improves usability and readability for all users.

You can find some of the most common text and background color combinations in the CSS Framework Themes section. They are all vetted to pass the minimum contrast ratios, including both normal text and link text styles.